<template>
  <div class="main_content">
    <!-- banner图 + 文字描述 -->
    <div class="main_banner">
      <a href=""
        ><img class="banner_img"
          src="../../public/蓝色的海.jpg"
          alt=""
      /></a>
      
    </div>
    <!-- 切换三个类型 -->
    <div class="main_inner">
      <center>
        <span
          v-for="item in category"
          :key="item.name"
          class="main_inner_selected"
          :class="{ active_item: active == item.name }"
          @click="change_item(item.name)"
          >{{ item.name }}</span
        >
      </center>
    </div>
    <!-- 图片盒子 -->
    <div class="main_item">
      <div class="item_box" v-for="item in image_list" :key="item.id">
        <router-link
              :to="{ name: 'image_detail', params: { id: item.id } }"
            >
              <img class="item_img" :src="item.url" alt="" />
            </router-link>
        <div class="auther_name">
          © {{ item.user_id.username }}
          <i class="el-icon-chat-round message">0</i>
          <i class="el-icon-star-off message">0</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../request";
export default {
  data() {
    return {
      category: [
        {
          name: "人物",
        },
        {
          name: "风景",
        },
        {
          name: "动物",
        },
      ],
      active: "人物",
      image_list: [],
    };
  },
  methods: {
    change_item(name) {
      this.active = name;
      this.get_image(name);
    },
    get_image(name) {
      request({
        url: "/works/get-works-by-tag-name/",
        params: {
          name: name,
        },
      }).then((res) => {
        this.image_list = res.data;
      });
    },
  },
  created() {
    this.get_image("人物");
  },
};
</script>

<style>
a {
  text-decoration: none;
}


.main_banner {
  width: 80%;
  height: 80%;
 }

 .banner_img{
   max-width: 1428px;
 }

.text_desc {
  padding: 20px 0px 20px 0px;
  text-align: center;
  font-size: 20px;
  border-bottom: 1px solid #222;
}

.text_desc_href {
  color: #bbb;
}

.left_text {
  font-size: 15px;
  color: #bbb;
  background: #222;
  padding: 6px 10px 6px 10px;
  position: relative;
  bottom: 2px;
  font-family: "ProximaNovaT-Thin";
  border-radius: 5px;
}

.right_text {
  background: #101010;
  padding: 0;
  margin: 0;
  font-weight: 400;
  font-style: normal;
  font-family: "ProximaNovaT-Thin";
  font-size: 22px;
  color: #ccc;
}

.main_inner {
  padding: 40px 0px 30px 0px;
}
/* 默认分类:人物,风景,动物三个按钮的样式 */
.main_inner_selected {
  padding: 7px 0 10px;
  border-bottom: 1px solid #444;
  text-transform: uppercase;
  margin: 0 20px;
  color: #666;
  font-size: 19px;
  font-family: proximanovat-thin;
  letter-spacing: 1px;
  cursor: pointer;
}
/* 默认分类:人物,风景,动物三个按钮中点击按钮的样式 */
.active_item {
  padding: 7px 0 10px;
  border-bottom: 1px solid #999;
  text-transform: uppercase;
  margin: 0 20px;
  color: #ccc;
  font-size: 19px;
  font-family: proximanovat-thin;
  letter-spacing: 1px;
}

.main_inner_selected:hover {
  padding: 7px 0 10px;
  border-bottom: 1px solid #999;
  text-transform: uppercase;
  margin: 0 20px;
  color: #ccc;
  font-size: 19px;
  font-family: proximanovat-thin;
  letter-spacing: 1px;
}

.main_inner_selected a {
  color: #666;
}

.main_inner_selected a:hover {
  color: #ccc;
}

.main_item {
  width: 100%;
  display: flex;
  margin: auto;
  flex-wrap: wrap;
}

.item_box {
  padding: 0 10px;
  width: 30%;
  margin: auto;
  text-align: center;
}

.item_img {
  max-width: 330px;
  max-height: 240px;
}

.auther_name {
  padding: 10px 0px 80px 0px;
  font-size: 13px;
  color: #555;
}

.message {
  color: #ccc;
  margin-left: 5px;
}
</style>
